<template>
 <div class="wrapper">
  <section class="main-outside">
    <myHeader class="header" :obj="myObj" :faceUrl="wxHead" @events="events"></myHeader>
    <div class="main">
      <mt-navbar v-model="selected" class="myNavbar">
        <mt-tab-item id="1" class="myNav">附近的</mt-tab-item>
        <mt-tab-item id="2" class="myNav">标签雷达</mt-tab-item>
        <mt-tab-item id="3" class="myNav">求见</mt-tab-item>
      </mt-navbar>
      <mt-tab-container class="container" v-model="selected">
        <mt-tab-container-item class="item item_0308" id="1">
          <div class="nearbyUL" v-if="datalist">
            <personDate :items="datalist" @personClick="askSee()" @scrollBottom="hasToBottom"></personDate>
          </div>
        </mt-tab-container-item>
        <!-- 标签雷达 -->
        <mt-tab-container-item class="radar_0308" style="height: 100%;" id="2">
          <radar-tag></radar-tag>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div class="nearbyUL">
            <personDate :items="datalist" @personClick="askSee()" @scrollBottom="hasToBottom"></personDate>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <!-- menu -->
      <mt-popup class="btns" v-model="popup.popupVisible" position="right">
        <router-link to="/myExpert" v-if="isExpert&&isExpert==2"><div class="first">我的行家</div></router-link>
        <router-link to="/recommendedUser" v-else-if="isExpert&&isExpert==1"><div class="first">我的申请</div></router-link>
        <router-link to="/becomeExpert" v-else><div class="first">成为行家</div></router-link>
        <router-link to="/question"><div>预约行家</div></router-link>
      </mt-popup>
    </div>
    <div class="blackBg" v-if="isdelshow">
      <div class="isdele">
        <p>是否删除</p>
        <div class="isdeleCont">
          <span @click="removeinformation(itAskToSeeId)">删除</span>
          <span @click="isdelshow = !isdelshow">取消</span>
        </div>
      </div>
    </div>
  </section> 
    <section v-if="swiperShow" class="fixed-box">
      <home-swiper v-if="clickObj" :messageid="clickObj"></home-swiper>
    </section>
 </div>
</template>
<script>
import myHeader from './base/myHeader';
import personDate from './base/expertList';
import hgjSkip from '../assets/js/hgjSkip';
import radarTag from './radar';
import homeSwiper from './homeSwiper';
import { fetch,fetchOtherGet,zdUrl,chatAppId,centerUrl,HJappid,HJchannelcode,IMAPI} from '../assets/api';
import { Popup } from 'mint-ui';
//import wxConfig from '../assets/js/wxConfig';
//import API from '../assets/js/asktoses';
import API from '../assets/js/fetchAPI';
import Client from '../assets/js/common';
export default {
  data () {
    return {
      myObj: { // header 组件接收的数据
        type: 1,
        text: "总有一个能帮到你的人"
      },
      popup:{
        popupVisible: false,
        searchVisible: false
      },
      swiperShow:false,
      selected: this.$route.query.index,
      loginData:null,
      datalist:null,//数据存储
      clickObj:null, //点击附近专家列表某一项的数据id或索引
      pos:Client.getStore("myLocation"), //附近地理位置
      PageIndex:1,
      canLoad:true, //控制是否可以加载更过
      isExpert:null,
      isTest:this.$route.query.test, //测试专用清理登录数据缓存
      wxHead:null,
      isdelshow:false,
      itAskToSeeId:null,
    }
  },
  created () {
    if(this.isTest) {
      Client.removeStore('login');
    }
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.getMyhead();
      if(!this.selected){
        this.selected = '1';
      } else {
        switch(this.selected){
          case '2':
            break;
          case '3':
            this.listDate();
            break;
          default:
            this.nearDate();
            break;
        }
      };
      this.checkExpert();
    });
  },
  methods: {
    events(i) { // 头部myHeader组件点击事件返回值（1、2、3、4）
      if(i == 1){ // 点击头像
        location.href = `${centerUrl}expert/expertCenter?AppId=${HJappid}&channelcode=${HJchannelcode}`;
      }else if(i == 4){ //点击弹层，（我的行家、发布问题）
        this.useWrap("popupVisible", true);
      }
    },
    showdele(item) {
      this.isdelshow = !this.isdelshow;
      this.itAskToSeeId = item;
    },
    async getMyhead(){
      try{
        let resp = await fetchOtherGet(IMAPI + 'PersonalV1/GetMyUserView',
          {
            ...this.loginData[0],
            channelcode:HJchannelcode
          }
        );
        if(resp.Result.HeadUrl){
          this.wxHead = resp.Result.HeadUrl;
        }
      }catch(e){
        //console.log('请求个人数据失败',e);
      }
    },
    async checkExpert(){
      let expertRes = await fetch(API.checkExpert,{...this.loginData[0]});
      this.isExpert = expertRes.Result.State;
    },
    //附近
    async nearDate(page = 1){
      if(!this.pos){
        this.pos = await hgjSkip.getLocation();
        Client.setStore("myLocation",this.pos);
      }
      this.canLoad = false;
      let res = await fetch(API.nearInfo,{...this.loginData[0],Latitude:this.pos.currentLat,Longitude:this.pos.currentLon,PageIndex:page});
      if(page == 1){
        if(!res.Result) return;
        this.datalist = res.Result.Messages;
      }else{
        let moreMess = res.Result.Messages;
        this.datalist = [...this.datalist,...moreMess];
      }
      this.PageIndex++;
      if(res.Result.PageSize<10){
        this.canLoad = false;
      }else{
        this.canLoad = true;
      }
    },
    //求见
    async listDate(page = 1){
      this.canLoad = false;
      let res = await fetch(API.getAskToSesList,{...this.loginData[0],PageIndex:page}),
          infos = res.Result;
      if(page == 1){
        this.datalist = infos.Messages;
      }else{
        let meetMess = infos.Messages;
        this.datalist = [...this.datalist,...meetMess];
      }
      if(infos.Messages.length<infos.PageSize){
        this.canLoad = false;
      }else{
        this.canLoad = true;
      }
      this.PageIndex++;
    },
    askSee(obj){
      this.swiperShow = !this.swiperShow;
      this.clickObj = this.$store.state.clickObj;
    },
    useWrap(str, bool){
      this.popup[str] = bool;
    },
    showList(){
      this.$refs.radarWrap.style.transform = 'translate3D(0px, -50%, 0px)';
    },
    toLink(str){
       this.$router.push({path: str});
    },
    async hasToBottom(){
      if(this.canLoad){
        if(this.selected == 1){
          this.nearDate(this.PageIndex);
        } else {
          this.listDate(this.PageIndex);
        }
      }
    }
  },
  watch:{
    selected(val){
      this.PageIndex = 1;
      this.datalist = null;
      this.canLoad = true;
      if(val == 1){
        this.nearDate();
      } 
      else if(val == 3){
        this.listDate();
      }
      this.$router.replace({path:'/',query:{index:val}});
    },
    '$store.state.boxShow':function(val){
      this.swiperShow = val;
      this.clickObj = this.$store.state.clickObj;
    }
  },
  components: {
    myHeader,
    personDate,
    Popup,
    radarTag,
    homeSwiper
  }
}

</script>

<style lang="less">
  .wrapper {
    height: 100%;
    width: 3.75rem;
    .main-outside{
      position:absolute;
      height:100%;
      .blackBg{
        position: absolute;
        height: 100%;
        z-index: 55;
        background: rgba(0, 0, 0, .3);
        top: 0;
        left: 0;
        width: 100%;
        .isdele{
          position: absolute;
          top: 50%;
          left:50%;
          transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          background: #fff;
          width: 2.5rem;
          z-index: 55;
          padding: .1rem 0 0;
          p{
            font-size: .16rem;
            color: #333;
            text-align: center;
            line-height: 2;
          }
          .isdeleCont{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: .1rem;
            border-top: 1px solid #ddd;
            span{
              display: inline-block;
              font-size: .16rem;
              color: #666;
              flex-grow: 1;
              text-align: center;
              line-height: 2.5;
              &:nth-of-type(1){
                border-right: 1px solid #ddd;
              }
              &:active{
                background: #f5f5f5;
              }
            }
          }
        }
      }
    }
    .main {
      width: 3.75rem;
      height: 100%;
      position: absolute;
      padding-top: .44rem;
      box-sizing: border-box;
      top: 0;
      left: 0;
      
      .addSearch_0315 {
         border-radius: .03rem;
         .searchBtn_0316 {
          width: 3.45rem;
          display: flex;
          justify-content: center;
          button {
            width: 1.7rem;
            height: .4rem;
            border: none;
             background: none!important;
            border-top: .01rem solid #E5E5E5;
            color: #39393D;
            font-size: .18rem;
            &.btnL_0316 {
              border-right: .01rem solid #E5E5E5;
            }
          }
         }
        .searchWrap2_0315 {
          width: 3.45rem;
          background: white;
          padding: .07rem .15rem 0;
          box-sizing: border-box;
          border-radius: .08rem;
          .searchItem_0316 {
            width: 100%;
            height: .42rem;
            display: flex;
            align-items: center;
            padding: .08rem 0;
            box-sizing: border-box;
            color: #828282;
            border-bottom: .01rem solid #E5E5E5;
            &:nth-last-child(1) {
              border-bottom: none;
              //margin-bottom: 1rem;
            }
          }
          .searchInput_0316 {
            width: 3.13rem;
            height: .3rem;
            border: .01rem solid #D8D8D8;
            border-radius: .03rem;
            padding: 0 .12rem;
            box-sizing: border-box;
            margin: 0 auto;
            color: #828282;
          }
          .searchTitle_0316 {
            font-size: .18rem;
            height: .25rem;
            line-height: .25rem;
            color: #4A4A4A;
            text-align: center;
            font-weight: 500;
            margin-bottom: .13rem;
          }
        }
      }
      
      .container {
        padding-top: 1rem;
        height: 100%;
        width: 3.75rem;
        position: absolute;
        top: 0;
        box-sizing: border-box;
        .lists{
          height: 100%;
        }
        >div {
          height: 100%;
        }
        .item {
          padding-top: 1.01rem;
          height: 100%;
          width: 3.75rem;
          position: absolute;
          top: 0;
          box-sizing: border-box;
        }
        .item_0308 {
          overflow-y: auto;
        }
        .radar_0308 {
          height: 100%;
          position: relative;
          overflow: hidden;
        }
        .nearbyUL {
          padding-left: .14rem;
          //padding-top: 1.01rem;
          width: 3.75rem;
          position: absolute;
          top: 1rem;
          bottom: 0;
          left: 0;
          box-sizing: border-box;
          overflow-y: auto;
          
        }
        
      }
      .btns {
        top: 1rem;
        width: 1.15rem;
        height: .9rem;
        border-radius: .03rem;
        background: white;
        div {
          height: .47rem;
          line-height: .47rem;
          text-align: center;
          color: #333;
          font-size: .16rem;
          &.first {
            border-bottom: .01rem solid #ccc;
          }
        }
        &:before{
        width:0;
        height:0;
        display:block;
        content:'';
        border-width:.06rem;
        border-style:solid;
        border-color: transparent transparent #fff transparent;
        position:absolute;
        right:.1rem;
        top:-.12rem;
      }
      }
    }
    .fixed-box{
      height:100%;
      width: 100%;
      position: fixed;
      z-index:100;
      top:0;
      left:0;
      background: #fff;
    }
  }
</style>

<style>
.header {
  position: relative;
  z-index: 2;
}
.myNavbar {
  display: block;
  justify-content: space-around;
  overflow: hidden;
  padding: 0 .14rem;
  box-sizing: border-box;
  background: #FAFAFA;
  position: relative;
  z-index: 2;
}
.mint-navbar .myNav {
  display: block;
  width: .85rem;
  float: left;
  margin: 0 .15rem;
}
.mint-navbar .is-selected {
   border-bottom: 3px solid #557AFF!important;
}
.mint-tab-item{
  padding: 12px 0 !important;
}
.mint-navbar .myNav .mint-tab-item-label {
   font-size: .14rem;
}
.mint-navbar .is-selected .mint-tab-item-label {
   color: #557AFF;
   font-weight: 600;
   font-size: .14rem;
}
</style>